<template>
  <div class="loginbox">
    <div class="content">
    <div class="login_main">
      <img src="@/assets/images/login/left_top.png" alt="">
      <img src="@/assets/images/login/right_top.png" alt="">
      <img src="@/assets/images/login/left_b.png" alt="">
      <img src="@/assets/images/login/right_b.png" alt="">
      <h3 class="login_title">欢迎登录</h3>
      <div class="login">
        <el-form
        label-position='top'
        @submit.native.prevent
      >
        <!-- 登录第一步 -->
        <template v-if="!checkLogin">
          <el-form-item :label='$t("label154")'>
            <el-input
              v-model="checkLoginData.account"
              autocomplete='off'
              :placeholder='$t("label162")'
              maxlength="12"
            >
            </el-input>
          </el-form-item>
          <el-form-item :label='$t("password")||"密码"'>
            <el-input
             show-password
              v-model="checkLoginData.password"
              type='password'
              autocomplete='off'
              :placeholder='$t("pwdPlaceholder")||"请输入密码"'
            >
            </el-input>
          </el-form-item>
          <el-form-item :label='$t("imgCode")||"验证码"'>
            <div class="code-wrap flex flex-between">
              <el-input
                v-model="checkLoginData.verCode"
                :placeholder='$t("imgCodePlaceholder")||"请输入验证码"'
              >
              </el-input>
              <div
                @click="createCode(verCodeNumArr,4)"
                class="code"
              >
                <ver-code
                  :contentHeight='38'
                  :identifyCode='verCodeStr'
                >
                </ver-code>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <button
              @click="loginHandle()"
              class="btn-block btn-large btn-gold btn-active"
              v-text="$t('login')||'登录'"
            >
            </button>
          </el-form-item>
          <div class="flex flex-between bott_link">
            <router-link to='/user/resetpwd' class="go-reg">{{$t('forgetPwd')||"忘记密码"}}?</router-link>
            <router-link
              class="go-reg"
              to='/user/register'
              v-text='$t("registerNow")||"立即注册"'
            ></router-link>
          </div>
        </template>
        <!-- 登录验证 -->
        <template v-else>
          <el-form-item :label="$t('loginAuth')||'登录验证'">
            <el-radio-group v-model="loginData.type" >
              
              <el-radio
                :disabled='bindCellphone?false:true'
                label="1"
              >{{$t('mobileCode')||'手机验证码'}}</el-radio>
              <el-radio
                label='3'
               :disabled='bindGoogleAuth?false:true'
              >
                {{$t('googleCode')||'谷歌验证码'}}
              </el-radio>
              <el-radio
                label='2'
               :disabled='bindEmail?false:true'
              >
                {{$t('label161')||'邮箱验证码'}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
          <div class="mobile-code-wrap p-rel input_code">
            <input type="text" v-model="loginData.code"
              v-show="loginData.type!=''&&loginData.type!='3'"
              name='mobileCode' maxlength="6"
              :placeholder='myCode?loginData.type=="1"?$t("mobileCodePlaceholder"):$t("emailCodePlaceholder"):$t("label170")'
              :disabled="!myCode"
            >
            <input
              v-show="loginData.type!=''&&loginData.type=='3'"
              v-model="loginData.code"
              name='googleCode'
              :placeholder='$t("fillGoogleCode")||"请输入谷歌验证码"'
            >
            <div
              v-show="loginData.type!=''&&loginData.type!='3'"
              @click='sendCode()'
              class="mobile-code abs-v-center color-danger"
            >{{$t(this.codeTexti18n)}}{{second}}
            </div>
          </div>
          </el-form-item>
          <el-form-item>
            <button
              @click="loginHandle"
              class="btn-block btn-large btn-gold btn-active"
              v-text="$t('login')||'登录'"
            >
            </button>
          </el-form-item>
        </template>
      </el-form>
      </div>
    </div>
    <!--  -->
    <!-- QRCODE ----AD---- -->
        <div class="qrcodedown">
          <div class="qrbox">
            <vue-qr :text="downAppurl"  qid="testid" :size="60" :margin='5' ></vue-qr>
          </div>
          <div class="right-txt">
            <p class="toptip">交易所全球站App</p>
            <p class="toptip">随时随地 便捷交易</p>
            <p class="tips">扫描二维码下载交易所App</p>
          </div>
        </div>
    </div>    
    <div ref="auth"></div>
  </div>
</template>
<script>
import loginModal from "@/components/Login/LoginModal.vue";
import verCode from "@/components/other/verCode";
import VueQr from "vue-qr";
import { Toast } from "vant";
export default {
  components: { loginModal, verCode,VueQr },
  data() {
    const bg = require("@/assets/images/user/dl_bj.png");
    return {
      bg: `background-image:url(${bg})`,
      checkLoginData: {
        account: "",
        password: "",
        verCode: ""
      },
      canGetCode: true,
      loginData: {
        type: "", //3 是google验证，1手机验证,2邮箱
        code: "",
        areacode:'',
      },
      myTel: "",
      myEmail: "",
      myGoogle: "",
      bindGoogleAuth: false,
      bindEmail: false,
      bindCellphone: false,
      checkLogin: false,
      getCodeTimes: 0,
      codeTexti18n: "getMsgCode",
      second: "",
      myCode: false,
      verCodeNumArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      verCodeStr: "",
      oldPath: "",
      canSubmit: false,
      IPS:'',
      areacode:'',

      member:'',
      downAppurl:'',
      // 验证码
      myCaptcha:null,
      authToken:'',
      // isshowProp 是否弹出过模态框
      isshowProp:false,
    };
  },
  watch: {
    "loginData.type": "onTypeChage"
  },
  created() {
    //页面加载
    this.downAppurl= `${this.api.downAppurl}`;
  },
  mounted() {
    this.createCode(this.verCodeNumArr, 4);
    // this.initAuth();
  },

  methods: {
    // 验证码
    initAuth(){
      this.myCaptcha = _dx.Captcha(this.$refs.auth, {
        appId: '84fd16e0a01b295796a6f33e61fa7496', //appId，在控制台中“应用管理”或“应用配置”模块获取
        style:'popup',
        qLink:false,
        logoLink:false,
        success:(token)=>{
          console.log(121345456);
          // console.log('token:', token)
          this.authToken = token;
          console.log(this.authToken);
          this.myCaptcha.hide();
          this.sendCode();
          this.isshowProp=false;
        }
      })
    },
    showAuthPopup(){
      // 弹出极验第三方model
      this.myCaptcha.reload();
      this.myCaptcha.show();
      this.isshowProp=true;
    },
    // 生成图片验证码
    createCode(arr, len) {
      let str = "";
      for (let i = 0; i < len; i++) {
        str += this.verCodeNumArr[
          this.Util.randomNum(0, this.verCodeNumArr.length)
        ];
      }
      this.verCodeStr = str;
    },
    sendCode() {
      if (!this.canGetCode) return false;
      this.countDown();
      let [type, account] =
        this.loginData.type == "2" ? ["loginbyemail", this.myEmail] : ["loginbytel", this.myTel];
        if(this.loginData.type==2){
          this.areacode='0'
        }else if(this.loginData.type==1){
          this.areacode=this.loginData.areacode;
        }
        console.log(this.loginData.type);
        console.log(this.checkLoginData.account);
      let Taccount = this.member;
      this.request(this.api.getcode, {
        type: type,
        token: Taccount,
        ip:this.IPS,
        showLoading: true,
        areacode:this.areacode,
        autotoken:this.authToken,
      }).then(res => {
        if (res.code == "0") {
          this.myCode = true;
          this.successMsg(res.msg);
        } else {
          this.errMsg(res.msg || "获取验证码失败");
        }
      });
    },
    // 倒计时函数
    countDown() {
      this.timer = this.Util.timerCounter({
        onStart: t => {
          this.canGetCode = false;
          this.getCodeTimes += 1;
          this.second = `${t}s`;
          this.codeTexti18n = "countDown";
        },
        onCounting: t => {
          this.second = `(${t}s)`;
          this.codeTexti18n = "countDown";
        },
        onComplete: () => {
          this.canGetCode = true;
          if (this.getCodeTimes > 0) {
            this.codeTexti18n = "tryAgain";
            this.second = "";
          }
        }
      });
    },
    // 登录表单验证
    validate(val, name) {
      if (val == "") return;
      this.canSubmit = true;
      switch (name) {
        case "account":
          if (!this.Util.isUserName(val)) {
            this.errMsg("label159");
            this.canSubmit = false;
          }
          break;
        case "cellphone":
          if (!this.Util.isPhone(val) && !this.Util.isEmail(val)) {
            this.errMsg("label156");
            this.canSubmit = false;
          }
          break;
        case "verCode":
          if (val != this.verCodeStr) {
            this.errMsg("label126");
            this.canSubmit = false;
          }
          break;
      }
    },
    // 登录验证
    loginHandle() {
      if (!this.checkLoginData.account) {
        this.errMsg("label162");
        return;
      }
      if (!this.checkLoginData.password){
        this.errMsg("label175");
        return;
      }
      if (this.checkLoginData.verCode != this.verCodeStr) {
        this.errMsg("label126");
        return;
      }
      
      this.request(this.api.memberLogin, {
        loginpassword: this.checkLoginData.password,
        member:this.checkLoginData.account,
        device:'web',
        ip:this.IPS,
        showLoading: true
      }).then(res => {
        if (res && res.code != "0") {
          this.errMsg(res.msg || "登录失败");
          return false;
        }
        this.successMsg(res.msg);
        this.userModel.isLogin = true;
        this.storage.set("isLogin", true);
        this.storage.set("token", res.data.token);

        if (res.data!=[]) {
          this.userModel.cellphone = res.data.tel;
          this.userModel.email = res.data.email;
          this.storage.set("cellphone", res.data.tel || "");
          this.storage.set("email", res.data.email || "");
        }
        this.storage.set("tradePasswordChecked", false);
        this.navigateTo("/");
      });
    },
    // 登录第一步
    loginStep() {
      // if (!this.canSubmit) return;
      this.request(this.api.login, {
        member: this.checkLoginData.account,
        loginpassword: this.checkLoginData.password,
        ip:this.IPS,
        device:'web',
        authToken:this.authToken,
        showLoading: true,
      }).then(res => {
        if(res.code==0){
          // this.$message({
          //   message: res.msg,
          //   type: 'success'
          // });
          this.loginData.areacode=res.data[0].areacode;
          this.bindGoogleAuth = res.data[0].googlestate;
          this.bindCellphone = res.data[0].telstate;
        
          // if(this.bindCellphone){
          //   this.loginData.type='1';
          // }
          this.bindEmail = res.data[0].emailstate;
          this.myTel = res.data[0].member || "";
          this.myEmail = res.data[0].member || "";
          this.member=res.data[0].member || "";
          this.myGoogle = res.data.member || "";
          this.checkLogin = true;
        }else if (res && res.code == "30") {
          this.errMsg(res.msg || "登录失败");
          return false;
        }else if(res.code==1103){
          this.errMsg(res.msg || "登录失败");
          return false;
        }else{
          this.errMsg(res.msg || "登录失败");
          return false;
        }  
      });
    },
    //验证方式切换 切换时初始化验证码发送定时器
    onTypeChage() {
      this.timer && clearInterval(this.timer);
      this.codeTexti18n = "getMsgCode";
      this.loginData.code = "";
      this.second = "";
      this.canGetCode = true;
      this.myCode = false;
    },
      // 0608修改登录流程
    loginNextBtn(){
      if(this.checkLoginData.account==''){
        this.errMsg("请填写登录账号");
        return
      }
      if(this.checkLoginData.password==''){
        this.errMsg("请填写登录密码");
        return
      }
      if(!this.isshowProp){
        this.showAuthPopup();
      }else{
        this.errMsg("请完成验证");
        return
      }
      
    },
    // 改版-新
    postLogin(){
      //连接登录接口,传入必填参数
      this.request(this.api.login, {
        member: this.checkLoginData.account,
        loginpassword: this.checkLoginData.password,
        ip:this.IPS,
        device:'web',
        autotoken:this.authToken,
        showLoading: true,
      }).then(res => {
        if(res.code==0){
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.userModel.isLogin = true;
          this.storage.set("isLogin", true);
          this.storage.set("token", res.data.token);

          if (res.data!=[]) {
            this.userModel.cellphone = res.data.tel;
            this.userModel.email = res.data.email;
            this.storage.set("cellphone", res.data.tel || "");
            this.storage.set("email", res.data.email || "");
          }
          this.storage.set("tradePasswordChecked", false);
          this.navigateTo("/");
        }else{
          this.errMsg(res.msg || "登录失败");
          return false;
        }  
      });
    }
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-radio__label{
  color: white;
}
.loginbox{
  padding:50px 0px;min-height:800px;
  background:url('~@/assets/images/login/bg1.png');
  .content {
    padding: 1px 1px 40px;
    width: 560px;
    min-height: calc(100% - 104px);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 0;
    margin: 0 auto;
    .resize {
      margin: 10px auto 0 auto;
    }
  }
  .login_main{
    border: 1px solid #0046a9;
     background-color:rgba(206, 217, 238, 0.1);
     padding: 0 48px 48px;border-radius: 3px;
     position: relative;
      img:nth-child(1){
        position: absolute;
        left: -4px;
        top: -4px;
      }
       img:nth-child(2){
        position: absolute;
        left: 520px;
        top: -4px;
      }
        img:nth-child(3){
        position: absolute;
        left: -4px;
        bottom:-2px;
      }
        img:nth-child(4){
        position: absolute;
        left: 520px;
         bottom:-2px;
      }
  }
  .login_title{text-align: center;font-size: 30px;color:white;padding: 40px 0;}
  .go-reg {
    color: #357ce1;
  }
.el-form-item {
  margin-bottom: 20px;
 /deep/ .el-form-item__label{
    color:white ;
  }
  .code-wrap {
    height: 40px;
    box-sizing: border-box;
    line-height: normal;
  }
  button {
    margin-top: 1px;
  }
  .code {
    width: 95px;
    border: $default-border;
    margin-left: 15px;
  }
}
.mobile-code-wrap {
  margin-bottom: 20px;
}
.mobile-code {
  width: 120px;
  text-align: right;
  right: 15px;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
  &.color-danger {
    color: #409EFF;
  }
}
.login_logo{width: 181px;display:block;margin: 20px auto;}
}
//  qrad
  .qrcodedown{
    margin-top: 16px;
    overflow: hidden;
    border-radius: 3px;
    padding: 18px 24px;
    display: flex;
    background-color: #334164;
    background-repeat: no-repeat;
    background-position: bottom right 24px;
    background-image: url(../../assets/images/user/e46bbe8.png);
    .qrbox{
      width: 62px;
      height: 62px;
      padding: 2px;
      background: #fff;
    }
    .right-txt{
      margin-left: 15px;
      .toptip{color: #fff;font-size: 14px;margin-bottom: 7px;}
      .tips{
        color: #8199c3;
        font-size: 12px;
        margin-top: 15px;
      }
    }
  }
  .input_code{
    input{width: 350px;height: 35px;background: #ffffff;border:1px solid #eeeeee;padding-left: 10px;border-radius: 4px;}
  }
</style>